// Zurmo is a customer relationship management program developed by
// Zurmo, Inc. Copyright (C) 2014 Zurmo Inc.
//
// Zurmo is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License version 3 as published by the
// Free Software Foundation with the addition of the following permission added
// to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
// IN WHICH THE COPYRIGHT IS OWNED BY ZURMO, ZURMO DISCLAIMS THE WARRANTY
// OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
//
// Zurmo is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
// FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along with
// this program; if not, see http://www.gnu.org/licenses or write to the Free
// Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA.
//
// You can contact Zurmo, Inc. with a mailing address at 27 North Wacker Drive
// Suite 370 Chicago, IL 60606. or at email address contact@zurmo.com.
//
// The interactive user interfaces in original and modified versions
// of this program must display Appropriate Legal Notices, as required under
// Section 5 of the GNU Affero General Public License version 3.
//
// In accordance with Section 7(b) of the GNU Affero General Public License version 3,
// these Appropriate Legal Notices must retain the display of the Zurmo
// logo and Zurmo copyright notice. If the display of the logo is not reasonably
// feasible for technical reasons, the Appropriate Legal Notices must display the words
// "Copyright Zurmo Inc. 2014. All rights reserved".

.token-input-list {
	position: relative;
}

.token-input-input-token {
	padding: 2px;
}

/* Example tokeninput style #2: Facebook style */
.token-input-list {
	z-index: 0;
	overflow: hidden;
	height: auto !important;
	height: 1%;
	cursor: text;
	min-height: 1px;
	//z-index: 999;
	margin: 0;
	padding: 0;
	background-color: #fff;
	list-style-type: none;
	clear: left;
	border: 1px solid #ccc;
	.radius(3px);
	//font-size: 12px;
	color: #999;
	.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.3));
	width: 100%;
	
	input[type="text"]{
		border:none;
		.b-shadow(~"none !important");
        position: relative;
        z-index: 9999;
	}
	&.disabled{
		pointer-events:none;
		background:#EFEFEF;
		input{
			background:#EFEFEF;
		}
	}
}

.token-input-list li input {
	border: 0;
	margin: 0 !important;
	-webkit-appearance: caret;
	padding:0 !important;
	line-height:100%;
}

.token-input-token {
	overflow: hidden;
	height: auto !important;
	height: 20px;
	line-height: 20px;
	margin: 3px;
	padding: 0 5px;
	background-color: #D4E7BC;
	color: #666 !important;
	cursor: default;
	.radius(3px);
	float: left;
	white-space: nowrap;
	.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.3));
	p {
		display: inline;
		padding: 0;
		margin: 0;
		color: @textColor !important;
		font-size: 11px;
		font-style: normal;
	}
	span {
		line-height: 1;
		padding:0 3px;
		.radius(2px);
		color: @textColor !important;
		margin-left: 2px;
		font-weight: normal;
		cursor: pointer;
		&:hover{
			color: #fff !important;
			background: darken(#D4E7BC, 45%);
		}
	}
	b, p{
		font-weight:normal;
	}
}

.token-input-selected-token {
	background-color: @themeColor2;
	color: #fff !important;
	.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.3));
}

.token-input-input-token {
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.token-input-dropdown {
	
	position: absolute;
	background-color: #fff;
	overflow: hidden;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	cursor: default;
	z-index: 1;
	.radius(0 0 3px 3px);
	color: #999;
	.b-shadow(0 0 1px 1px rgba(153, 153, 153, 0.3));
}

.token-input-dropdown p {
	margin: 0;
	padding: 5px;
}

.token-input-dropdown ul {
	margin: 0;
	padding: 0;
}

.token-input-dropdown ul li {
	background-color: #fff;
	padding: 3px;
	margin: 3px;
	list-style-type: none;
}

.token-input-dropdown ul .token-input-dropdown-item {
	background-color: #fff;
}

.token-input-dropdown ul .token-input-dropdown-item2 {
	background-color: #fff;
}

.token-input-dropdown ul li em {
	font-style: normal;
}

.token-input-dropdown ul .token-input-selected-dropdown-item {
	background-color: #D4E7BC;
	color: @textColor;
}